<template>
  <div class="fixed-table-actionbar">
    <div class="search-bar">
      <el-form :model="formItem" :inline="true" class="form-filter" size="mini">
        <el-form-item>
          <el-input v-model="formItem.s_name" clearable placeholder="请输入任务名称/编号..." @keyup.enter.native="globalSearch" @change="onMixedInputChange" />
        </el-form-item>
        <!-- <el-form-item>
          <el-select v-model="formItem.s_status" clearable placeholder="请选择任务状态" @change="onMixedSelectChange">
            <el-option v-for="(item) in status" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-date-picker
            v-model="timeRangeStockStart"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="任务开始日期"
            end-placeholder="任务结束日期"
            align="right"
            value-format="timestamp"
            @change="onDateInputChange"
          />
        </el-form-item>
        <el-form-item>
          <treeselect
            v-model="formItem.s_modelCode"
            :multiple="false"
            :options="cmdbModels"
            :load-options="loadOptions"
            :disable-branch-nodes="true"
            id-key="code"
            label-key="name"
            placeholder="请选择维护类别"
            @input="onSelectModelChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" plain icon="el-icon-search" @click="globalSearch" />
        </el-form-item>
      </el-form>
    </div>
    <div class="action-bar">
      <el-button plain size="mini" icon="el-icon-download" @click="exportData">导出</el-button>
    </div>
  </div>
</template>
<script>
import { clone } from '@neu/biz-core/utils/utils'
import { pureTree } from '@neu/dcom-ui/api/schema'
import { exportExcel } from '@neu/dcom-ui/api/maintainTask'

const formItem = {
  s_name: '',
  s_code: '',
  s_startDateTime: '',
  s_endDateTime: '',
  s_modelCode: null,
  s_status: ''
}

export default {
  name: 'MaintainTaskQueryActionBar',
  data() {
    return {
      /** CMDB模型树 */
      cmdbModels: null,
      /** 存储时间范围 */
      timeRangeStockStart: [],
      formItem: {
        ...formItem
      },
      status: [],
      /** 时间选择器 */
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  mounted() {
    this.status = [{ value: 'undo', label: '未执行' },
      { value: 'doing', label: '执行中' },
      { value: 'done', label: '已执行' }]
  },
  methods: {
    globalSearch: function() {
      if (this.timeRangeStockStart && this.timeRangeStockStart.length !== 0) {
        this.formItem.s_startDateTime = this.timeRangeStockStart[0]
        this.formItem.s_endDateTime = this.timeRangeStockStart[1]
      } else {
        this.formItem.s_startDateTime = ''
        this.formItem.s_endDateTime = ''
      }

      this.formItem.s_code = this.formItem.s_name
      this.$parent.formItemView = clone(this.formItem)
      this.$parent.filter(this.formItem)
    },
    reset: function() {
      this.formItem = clone(formItem)
      this.$parent.formItemView = clone(this.formItem)
      this.timeRangeStockStart = []
      this.globalSearch()
    },
    onMixedInputChange(value) {
      if (value === '') {
        this.globalSearch()
      }
    },
    onDateInputChange(value) {
      if (value === '' || value === null) {
        this.timeRangeStockStart = []
      }
      this.globalSearch()
    },
    loadOptions({ action }) {
      if (action === 'LOAD_ROOT_OPTIONS') {
        return pureTree().then(response => {
          this.cmdbModels = response.data
        })
      }
    },
    onSelectModelChange() {
      this.globalSearch()
    },
    clearForm() {
      this.timeRangeStockStart = []
      this.formItem = {
        ...formItem
      }
    },
    onMixedSelectChange(value) {
      this.globalSearch()
    },
    exportData() {
      var queryParams = {}
      if (typeof this.$parent.formItemView.s_name.value === 'undefined') {
        queryParams = this.formItem
      } else {
        queryParams.s_name = this.$parent.formItemView.s_name.value
        queryParams.s_orgCode = this.$parent.formItemView.s_orgCode.value
        queryParams.s_chargeUserId = this.$parent.formItemView.s_chargeUserId.value
        queryParams.s_modelCode = this.$parent.formItemView.s_modelCode.value
        queryParams.s_status = this.$parent.formItemView.s_status.value
        queryParams.s_result = this.$parent.formItemView.s_result.value
        queryParams.s_startDateTime = this.$parent.formItemView.s_startDateTime.value
        queryParams.s_endDateTime = this.$parent.formItemView.s_endDateTime.value
      }

      exportExcel(queryParams).then(res => {
        const content = res
        const blob = new Blob([content])
        const fileName = '库存查询信息.xlsx'
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }
  }
}
</script>
